<template>
  <el-upload
    :http-request="httpRequest"
    list-type="picture-card"
    ref="upload"
    :before-upload="handleBeforeUpload"
    :on-success="handleUploadSuccess"
    :on-error="handleUploadError"
  >
    <el-icon><Plus /></el-icon>
    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <el-icon><zoom-in /></el-icon>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
            <el-icon><Download /></el-icon>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>

  <el-button @click="downloadTemplateFile" class="mt-[20px]">下载模板</el-button>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { Plus, Delete, Download, ZoomIn } from "@element-plus/icons-vue";
import { ElMessage, UploadProps } from "element-plus";
import OssDownloadFileUrl from "@/utils/Oss/OssDownloadFileUrl";
import OssUploadFile from "@/utils/Oss/OssUploadFile";
import { downloadOssFile } from "@/utils/index";

import type { UploadFile } from "element-plus";
defineOptions({
  name: "DhrUpload"
});
const upload = ref();
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const handleRemove = (file: UploadFile) => {
  console.log(file);
};

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

const handleDownload = async (file: UploadFile) => {
  console.log(file);
  try {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    const result = await OssDownloadFileUrl(file.name);
    console.log("sdk 获取下载链接 成功", result);
    console.log("下载链接", result);
    downloadOssFile(result, "template.xlsx");
  } catch (e) {
    console.log("sdk 获取下载链接 失败", e);
  }
};
// 下载模板
const downloadTemplateFile = async (file: UploadFile) => {
  console.log(file);
  try {
    const fileName = "labelRule20241128154727.xlsx";
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    const result = await OssDownloadFileUrl(fileName);
    console.log("sdk 获取下载链接 成功", result);
    console.log("下载链接", result);
    downloadOssFile(result, "template.xlsx");
  } catch (e) {
    console.log("sdk 获取下载链接 失败", e);
  }
};

// 上传前校检格式和大小
function handleBeforeUpload(file) {
  const isXLSX = file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";

  if (!isXLSX) {
    ElMessage.error("文件格式不正确, 请上传xlsx格式文件!");
    return false;
  }
  const isLt1M = file.size / 1024 / 1024 < 5;
  if (!isLt1M) {
    ElMessage.error("上传文件大小不能超过 5MB");
    return false;
  }
  return true;
}

const httpRequest: UploadProps["httpRequest"] = async ({ file }) => {
  console.log("自定义上传");
  try {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-expect-error
    const result = await OssUploadFile(file);
    console.log("sdk 上传 成功", result);
  } catch (e) {
    console.log("sdk 上传 失败", e);
  }
};

// 上传成功的钩子
function handleUploadSuccess() {
  upload.value?.clearFiles(); // 上传成功之后清除历史记录
}

const handleUploadError = () => {
  upload.value?.clearFiles(); // 上传成功之后清除历史记录
};
</script>
<style scoped lang="scss"></style>
